<template>
  <view class="page friend-add">
    <view class="search-bar">
      <uni-search-bar v-model="searchText" :focus="true" @confirm="onSearch()" @cancel="onCancel()"
                      placeholder="圈子名称"></uni-search-bar>
    </view>
    <view class="user-items">
      <scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
        <view v-if="recommend" class="xw-book-wrapper">
          <view class="xw-book-sort">推荐</view>
        </view>
        <view v-else class="xw-book-wrapper">
          <view class="xw-book-sort">搜索结果</view>
        </view>
        <view v-for="(circle) in circles" :key="circle.id">
          <view class="user-item" @click="onCircleInfo(circle.id)">
            <head-image :name="circle.name" :url="circle.headImageThumb" :size="90"></head-image>
            <view class="user-name">
              {{ circle.name }}
              <uni-tag disabled :text="circle.tagName" :style="`background: ${circle.tagColor}; border: ${circle.tagColor}; margin-left:15rpx`" size="micro"></uni-tag>
              <uni-icons class="sex-girl" style="margin-left: auto;" type="person-filled" size="18" color="#10AEFF"></uni-icons>
              <text style="font-size: 24rpx">{{circle.memberCount}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import circle from "./circle.vue";
import HeadImage from "../../components/head-image/head-image.vue";
import {debounce} from "@/common";

export default {
  components: {HeadImage},
  computed: {
    circle() {
      return circle
    }
  },
  data() {
    return {
      status: 0,
      searchText: "",
      circles: [],
      recommend: true,
      debouncedSearch: null, // 用于存储防抖后的函数
    }
  },
  methods: {
    onCircleInfo(id) {
      uni.navigateTo({
        url: "/pages/circle/circle-info?id=" + id
      })
    },
    onCancel() {
      uni.navigateBack();
    },
    onSearch() {
      if (this.searchText === null || this.searchText === "" || this.searchText === undefined){
        this.circles = []
      }else {
        console.log('执行搜索')
        this.$http({
          url: "/circle/search?name=" + this.searchText,
          method: "GET"
        }).then((data) => {
          this.recommend = false
          this.circles = data;
        })
      }
    },
  },

  onLoad() {
    this.$http({
      url: "/circle/recommend",
      method: "GET"
    }).then((data) => {
      this.circles = data;
    })
  },
  created() {
    // 初始化防抖函数
    this.debouncedSearch = debounce(this.onSearch, 1000);
  },
  watch: {
    // 监听搜索文本的变化，触发防抖搜索
    searchText(newValue) {
      console.log('输入', newValue)
      this.debouncedSearch();
    }
  },
}
</script>

<style scoped lang="scss">
.xw-book-wrapper {
  padding: 10rpx 0 10rpx;
  display: flex;
  width: 100%;
}

.xw-book-sort {
  color: #999999;
  padding: 0 24rpx;
  flex: 1;
  line-height: 60rpx;
  background-color: #fafafa;
  font-size: 26rpx;
}

.friend-add {
  position: relative;
  border: #dddddd solid 1px;
  display: flex;
  flex-direction: column;

  .search-bar {
    background: white;
  }

  .user-items {
    position: relative;
    flex: 1;
    overflow: hidden;

    .user-item {
      height: 120rpx;
      display: flex;
      margin-bottom: 1rpx;
      position: relative;
      padding: 0 30rpx;
      align-items: center;
      background-color: white;
      white-space: nowrap;

      .user-name {
        display: flex;
        align-items: center;
        text-align: center;
        flex: 1;
        padding-left: 20rpx;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 60rpx;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .scroll-bar {
      height: 100%;
    }
  }

}
</style>